<template>
    <div class="sub_container">
        <h4>发表评论</h4>
        <hr>
        <textarea v-model="msg" placeholder="请输入评论内容(最多吐槽120字)" maxlength="120"></textarea>
        <mt-button @click="postComment" type="primary" size="large">发表评论</mt-button>

        <div v-for="(item,index) in comments" class="list">
            <div class="user">
                第{{index+1}}楼  用户：{{item.user_name}}
                发表时间：{{item.add_time | dateFormat}}
            </div>
            <div class="body">
                {{item.content}}
            </div>
        </div>

        <!--加载更多的按钮-->
        <mt-button @click="getMore" size="large" type="danger" plain>加载更多</mt-button>

    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "comment",
        data(){
            return {
                comments:[],//评论数据
                msg:'',//绑定
                pageIndex:1//默认展示第一条数据
            }
        },
        props:['id'],
        methods:{
            getComment(){
                // console.log(this.id)
                this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then( result =>{
                    // console.log(result)
                    if (result.body.status === 0){
                        // this.comments = result.body.message;
                        //拼接新数组
                        this.comments = this.comments.concat(result.body.message);
                    }
                })
            },
            //点击发表评论
            postComment(){
                if (this.msg.trim().length == 0){
                    Toast({
                        message:'请输入评论内容',
                        position:'top'
                    })
                    return false;
                }
                //参数①：地址
                //参数②：交给服务器的数据对象
                //参数③：定义提交的格式为普通表单 --> 已经全局配置过，可省略
                this.$http.post('api/postcomment/'+this.id,{content:this.msg}).then(result => {
                    if (result.body.status === 0){
                        //拼接出一个评论对象
                        let user = {
                            user_name:'匿名用户',
                            add_time:Date.now(),
                            content:this.msg
                        }
                        this.comments.unshift(user)
                        this.msg = '';
                    }
                })
            },
            //点击加载更多
            getMore(){
                this.pageIndex++;
                this.getComment();
            }
        },
        created(){
            this.getComment();
        }
    }
</script>

<style scoped lang="scss">
    .sub_container{
        textarea{
            height: 80px;
            margin: 0;
            font-size: 14px;
        }
        .list{
            margin: 5px 0;
            .user{
                line-height: 30px;
                background-color: #ccc;
                font-size: 14px;
            }
            .body{
                line-height: 35px;
                text-indent: 2em;
                font-size: 15px;
            }
        }
    }
</style>